<template>
  <div>
    <el-row>
      <el-col :span="24">
        <!-- 放搜索条件 -->

        <el-form :inline="true" :model="wardParm" class="demo-form-inline">

          <el-form-item label="请选择科室">
            <el-select v-model="wardParm.srDepartmentId" placeholder="请选择">
              <el-option v-for="tde in tdeList" :key="tde.id" :value="tde.id" :label="tde.deName"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="价格>">
            <el-input v-model="wardParm.srPrice" placeholder="请输入" style="width: 100px;"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="queryCondition">查询</el-button>
            <el-button type="primary" @click="remove">清空</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success" icon="el-icon-circle-plus-outline" @click="add">新增病房</el-button>

          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <!-- 放数据部分 -->
        <el-table :data="tableData" :header-cell-style="{ 'text-align': 'center' }" style="width: 100%; ">
          <el-table-column prop="srNo" label="病房编号" width="180">
          </el-table-column>
          <el-table-column prop="srPrice" label="费用(元)/天" width="150" align="center">
          </el-table-column>
          <el-table-column prop="srTotalNum" label="病床数" align="center">
          </el-table-column>


          <el-table-column prop="srDepartmentId" label="所属科室" align="center">
            <template slot-scope="scope">
              {{ getDepartmentName(scope.row.srDepartmentId) }}
            </template>
          </el-table-column>

          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button type="warning" icon="el-icon-edit" @click="upadtePage(scope.row.id)">修改</el-button>
              <el-button type="danger" icon="el-icon-delete" style="margin-left: 0;"
                @click="deleteWard(scope.row.id)">删除</el-button>
            </template>

          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <!-- 放分页 -->

        <el-pagination background :current-page="pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
          layout="total, sizes, prev, pager, next" @next-click="nextPage" @prev-click="prevPage"
          @size-change="changeSize" @current-change="changeCurrent" :total="total">
        </el-pagination>
      </el-col>
    </el-row>



    <!-- 放新增界面 -->

    <el-dialog title="病房添加" :visible.sync="wardAddVisible">
      <el-form :model="ward">
        <el-form-item label="病房编号">
          <el-input v-model="ward.srNo" style="width: 270px;"></el-input>
        </el-form-item>
        <el-form-item label="价格(元/天)" >
          <el-input v-model="ward.srPrice" autocomplete="off" style="width: 270px;"></el-input>
        </el-form-item>
        <el-form-item label="病床数" >
          <el-input v-model="ward.srTotalNum" autocomplete="off" style="width: 270px;"></el-input>
        </el-form-item>

        <el-form-item label="所属科室" >
          <el-select v-model="ward.srDepartmentId" placeholder="请选择所属科室">
            <el-option v-for="tde in tdeList" :key="tde.id" :value="tde.id" :label="tde.deName"></el-option>

          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="wardAddVisible = false ,ward = {}">取 消</el-button>
        <el-button type="primary" @click="addTokenWard">确 定</el-button>
      </div>
    </el-dialog>


    <!-- 放修改界面 -->

    <el-dialog title="病房修改" :visible.sync="wardUpdateVisible">
      <el-form :model="ward">
        <el-form-item label="病房编号">
          <el-input v-model="ward.srNo" style="width: 270px;"></el-input>
        </el-form-item>
        <el-form-item label="价格(元/天)" >
          <el-input v-model="ward.srPrice" autocomplete="off" style="width: 270px;"></el-input>
        </el-form-item>
        <el-form-item label="病床数" >
          <el-input v-model="ward.srTotalNum" autocomplete="off" style="width: 270px;"></el-input>
        </el-form-item>

        <el-form-item label="所属科室" >
          <el-select v-model="ward.srDepartmentId" placeholder="请选择所属科室">
            <el-option v-for="tde in tdeList" :key="tde.id" :value="tde.id" :label="tde.deName"></el-option>

          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="wardUpdateVisible = false,ward = {}">取 消</el-button>
        <el-button type="primary" @click="updateTokenWard">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      wardAddVisible: false,
      wardUpdateVisible:false,
      wardParm: {},
      ward: {
      },
      tableData: [],
      pageNum: 1,
      pageSize: 5,
      total: 0,
      tdeList: [],
    }
  },
  methods: {
    nextPage(val) {
      //用户点击下一页触发
      this.pageNum = val;
      this.queryWard();
    },
    prevPage(val) {
      //用户点击上一页触发
      this.pageNum = val;
      this.queryWard();
    },
    changeSize(val) {
      //改变每页显示的条数
      this.pageNum = 1;
      this.pageSize = val;
      this.queryWard();
    },
    changeCurrent(val) {
      this.pageNum = val;
      this.queryWard();
    },
    //搜索按钮
    queryCondition() {
      this.pageNum = 1;
      this.queryWard();
    },
    //查询病床
    queryWard() {
      let pageParm = {};
      pageParm.pageNum = this.pageNum;
      pageParm.pageSize = this.pageSize;
      pageParm.param = this.wardParm;

      this.$axios.post('api/ward/queryWard', pageParm)
        .then(res => {
          if (res.data.code === 200) {
            let parm = res.data.data;
            this.tableData = parm.list;
            this.total = parm.total;
          } 
        })
    },
    //清空搜索条件
    remove() {
      this.wardParm = {}
    },
    //新增病房界面
    add() {
      this.wardAddVisible = true;
    },
    //添加病房
    addTokenWard() {
      this.$axios.post('api/ward/addWard', this.ward)
        .then(res => {
          if (res.data.code === 200) {
            this.$message.success("添加成功");
            this.ward = {};
            this.wardAddVisible = false;
            this.queryWard();
          } else {
            this.$message.error("必选项为空");
          }
        })
    },
    //打开修改界面并传参
    upadtePage(id){
      this.wardUpdateVisible = true;
      this.$axios.get('api/ward/queryWardById/'+id)
      .then(res=>{
        if(res.data.code === 200){
          this.ward = res.data.data;
        }
      })
    },

    //查询所有部门
    queryTde() {
      this.$axios.get('api/form/queryde')
        .then(res => {
          if (res.data.code === 200) {
            this.tdeList = res.data.data;
          }
        })
    },
    //获取部门方法名
    getDepartmentName(id) {
      
      let tde = this.tdeList.filter(tde => tde.id == id)
    
      return tde[0].deName;
    },
    //修改病房
    updateTokenWard() {
      this.$axios.post('api/ward/updateWard', this.ward)
        .then(res => {
          if (res.data.code === 200) {
            this.$message.success("修改成功");
            this.ward = {};
            this.wardUpdateVisible = false;
            this.queryWard();
          }else {
            this.$message.error("该病房存在病人，修改失败");
            this.wardUpdateVisible = false;
          }
        })
    },
    //删除病房
    deleteWard(id){
      this.$axios.get('api/ward/deleteWard/'+id)
      .then(res=>{
        if (res.data.code === 200){
          this.$message.success("删除成功");
          this.queryWard();
        } else {
          this.$message.error("该病房存在病人，删除失败");
        }
      })
    }
  },
  created() {
    this.queryWard();
    this.queryTde();
  }
}
</script>

<style></style>